<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      function activityStatusInnerTextContained(expectedInnerTextPattern) {
        return pageConditions.became(
          `Activity status should contains "${expectedInnerTextPattern}"`,
          () => pageElements.activityStatuses()[0].innerText.includes(expectedInnerTextPattern),
          1000
        );
      }

      function activityChannelDataStateBecame(expectedState) {
        if (typeof expectedState === 'undefined') {
          return pageConditions.became(
            `Activity "channelData.state" should be undefined`,
            () => !('state' in pageObjects.getActivities()[0].channelData),
            1000
          );
        }

        return pageConditions.became(
          `Activity "channelData.state" should be "${expectedState}"`,
          () => pageObjects.getActivities()[0].channelData?.state === expectedState,
          1000
        );
      }

      function activityChannelDataWebChatSendStatusBecame(expectedSendStatus) {
        return pageConditions.became(
          `Activity "channelData['webchat:send-status']" should be "${expectedSendStatus}"`,
          () => pageObjects.getActivities()[0].channelData?.['webchat:send-status'] === expectedSendStatus,
          1000
        );
      }

      run(async function () {
        const { directLine, store } = testHelpers.createDirectLineEmulator();

        WebChat.renderWebChat(
          {
            directLine,
            store,
            styleOptions: { spinnerAnimationBackgroundImage: 'url(/assets/staticspinner.png)' }
          },
          document.getElementById('webchat')
        );

        // SETUP: Send a message
        await pageConditions.uiConnected();

        const sendMessage = await directLine.actPostActivity(
          () => pageObjects.sendMessageViaSendBox('Hello, World!', { waitForSend: false }),
          { id: 'a00001' }
        );

        // THEN: `channelData.state` should be "sending".
        await activityChannelDataStateBecame('sending');

        // THEN: `channelData['webchat:send-status']` should be "sending".
        await activityChannelDataWebChatSendStatusBecame('sending');

        // THEN: The message should have status of "Sending".
        await activityStatusInnerTextContained('Sending');

        // THEN: The activity object should not have an ID.
        expect('id' in pageObjects.getActivities()[0]).toBeFalsy();

        // WHEN: The echo back message had arrived.
        await sendMessage.echoBack();

        // THEN: `channelData.state` should be "undefined".
        //       It is correct that the value is `undefined` and due to an existing bug on INCOMING_ACTIVITY.
        //       When the echo back message is received before the return of the call `postActivity()`,
        //       there is a temporal moment that the `activity.channelData.state` become `undefined`.
        //       This bug is outlined in https://github.com/microsoft/BotFramework-WebChat/pull/4362.
        await activityChannelDataStateBecame(undefined);

        // THEN: `channelData['webchat:send-status']` should be "sending".
        await activityChannelDataWebChatSendStatusBecame('sending');

        // THEN: The message should have status of "Sending".
        await activityStatusInnerTextContained('Sending');

        // THEN: The activity object should have an ID of "a00001".
        expect(pageObjects.getActivities()[0]).toHaveProperty('id', 'a00001');

        // WHEN: The call to postActivity() had returned.
        sendMessage.resolvePostActivity();

        // THEN: `channelData.state` should be "sent".
        await activityChannelDataStateBecame('sent');

        // THEN: `channelData['webchat:send-status']` should be "sent".
        await activityChannelDataWebChatSendStatusBecame('sent');

        // THEN: The message should have status of "Just now".
        await activityStatusInnerTextContained('Just now');
      });
    </script>
  </body>
</html>
